﻿<template>

  <div class="collect">
      <div class="collect_header" ref="col_header">
        <img src="../../static/img/back_ccc.png" class="goback_col_header" v-on:click="go_back">
        <span class="collect_header_w">
          收藏夹
        </span>
      </div>
      <div class="sec_nav" ref="sec_nav">
        <div :class="{act:header_list[0].c}" v-on:click="show_click(0)">冒险卡</div>
        <div :class="{act:header_list[1].c}" v-on:click="show_click(1)">愿望</div>
        <div :class="{act:header_list[2].c}" v-on:click="show_click(2)">信物</div>
        <div :class="{act:header_list[3].c}" v-on:click="show_click(3)">图文语言</div>
      </div>
      <!-- main s-->
      <div class="main" ref="main">
          <scroller :on-refresh="refresh"
                    :on-infinite="infinite" ref="scroller_main">

          <!-- 冒险卡s -->
          <ul   v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="10" class="load_more clearfix" v-show="true">
            <li class="load_m_box "  v-for="data_mx in data_mx">
              <!-- 卡片名s -->
              <div class="load_m_box_header">
                {{data_mx.Title}}
              </div>
              <!-- 卡片名e -->

              <!-- card_img s -->
              <img v-bind:src="data_mx.image|new_img_show_base" class="img_limit">
              <!-- card_img e -->

              <!-- play_m s  -->
              <div class="play_m" :data-voice="data_mx.Voice" v-on:click="play_voice($event)">
                    语音播放
              </div>
              <!-- play_m e -->
              <!-- 问题s -->
              <!--<div class="wt_s">-->
                <!--我是谁，我在哪里，我到哪里去-->
              <!--</div>-->

              <!-- 问题e -->
            </li>


          </ul>
          <!-- 冒险卡e -->

          <!-- 愿望s -->
          <ul v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10" class="load_more_wish" v-show="true">
            <!--  -->
              <li class="wish_wrapper" v-for="data_wish in data_wish">
                <div class="wish_header">
                  {{data_wish.title}}
                </div>
                <div class="main_wish">
                  <div class="mian_wish_w">
                   {{data_wish.describe}}
                  </div>
                  <img v-bind:src="image|new_img_show_base" class="main_wisht_pnbg">
                </div>
                <div class="main_wish_bottom">
                  <span style="padding-left:9vw">时间 {{data_wish.start_time}}</span>
                  <span style="padding-right:9vw;">报名人数{{data_wish.count}}</span>
                </div>
              </li>
          </ul>
          <!-- 愿望e -->

          <!-- 信物s -->
          <ul v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10" class="token_slider clearfix" v-show="true" >
            <!--  -->
            <li class="token_wrapper" v-for="data_letter in data_letter">
              <img v-bind:src="data_lettet" class="token_wrapper_img">
              <p class="token_title">
                {{data_letter.CardName}}
              </p>
              <p class="token_introduce" v-html="data_letter.CardContent">

              </p>
              <div class="token_bottom">
                <img v-bind:src="data_letter.CardImage" class="token_bottom_user_img"/>
                <span class="user_name">
                 {{data_letter.userName}}
                </span>
              </div>
            </li>
          </ul>
          <!-- 信物e -->

          <!-- 图文语音s -->
          <ul v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10" class="load_more_wish" v-show="true" >
            <!--  -->
            <li class="img_wrapper" v-for="data_voice in data_voice">
                <img src="../../static/img/bg_all.png" class="bg_all">
                <div class="wrapper_voice">
                  <img src="../../static/img/play_voice.png" alt="Alternate Text" class="play_voice"/>
                </div>
            </li>

            <!--<li class="img_wrapper">-->
              <!--<img src="../../static/img/bg_all.png" class="bg_all">-->
              <!--<div class="wrapper_voice mb_box">-->
                <!--<div class="wrapper_voice_mb_box">-->

                <!--</div>-->
              <!--</div>-->
            <!--</li>-->
          </ul>
          <!-- 图文语言e -->
     </scroller>
      </div>
      <!-- main e -->
    <audio v-bind:src="voice_src" ref="audio_r" style="display: none;">
    </audio>
  </div>

</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import { InfiniteScroll  } from 'mint-ui';
  import '../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import VueScroller from 'vue-scroller'
  import limit_scroll from "../../static/js/limit_scroll.js";
  import { Toast, Indicator } from 'mint-ui';
  import qs from 'qs';
  import Vue from "vue";
  import axios from 'axios';
  import filter from "../filter/filter.js";
  import "../../static/css/Adventure/user_index_ad.css";
  import FooterMenu from "../index/FooterMenu.vue";
  import "../../static/js/use_rem.js";

  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  import common from "../common/common.js";
  Vue.prototype.$http = axios;
  Vue.use(VueScroller);
  Vue.use(MintUI);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        divTop: "",
        img_list: [],
        show_nav_data: false,
        show_input_card: false,
        user_list: {},//用户信息
        default_logo: "wx.yizhiweimeng.com/static/static/img/icon_man.png",
        classify_show: false,
        user_id: "",
        class_list: "",
        classify_list: "",
        card_list: "",
        user_index_show_data: false,
        ad_visit:true,
        other_data: "",//scroll other_data
        cover_native_nav_show: false,
        hsl_bg: "",
        set_user_info: false,
        header_list: [{ c: true }, { c: false }, { c: false }, { c: false }],
        list: [{ item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }],
        allLoaded: false,
        loading: false,
        select_id:1,
        data_mx:"", //冒险卡数据
        data_wish:"", //愿望数据
        data_letter:"", //信物数据
        data_voice:"",//图文什么贵
        voice_src:""
      }
    },
    beforeCreate: function () {
      //获取用户 信息
      ///api/user / getUserById
    },
    created: function () {

    },
    methods: {
      //go_back
      go_back: function () {
        mui.plusReady(()=>{
          mui.back();
        })
      },
        //play_voice
      play_voice:function (el) {

        this.voice_src = el.target.dataset.voice;
//        console.log(el.target.dataset.voice);
        this.$refs.audio_r.play();
      },
      pause_voice:function () {
        this.$refs.audio_r.pause();
      },
      //下拉
      refresh: function (done) {
        this.first_flag = false;
        this.page_n = 1;
        let myFirstPromise = new Promise((resolve, reject) => {
          this.get_data(resolve, reject);
        });
        myFirstPromise.then((x) => {
          if (x.length < 10) {
            done();
          }
        })
      },
      infinite: function (done) {
            if (this.first_flag == false) {
              this.page_n = 1;
            } else {
              this.page_n += 1;
            }

            let myFirstPromise = new Promise((resolve, reject) => {
              this.get_data( resolve, reject);
            });

            myFirstPromise.then((successMessage) => {
              // console.log("promise___fuck_you_bitch");
              //successMessage的值是上面调用resolve(...)方法传入的值.
              //successMessage参数不一定非要是字符串类型，这里只是举个例子
              //如果 没有返回值就是 到底了 没有数据了 我日
              if (successMessage.length == 0 || successMessage == "" || successMessage == undefined || successMessage.length < 10) {
                 done();
                this.$refs.scroller_main.finishInfinite(2);
              }
            })
            .catch(
              // Log the rejection reason
              (reason) => {
                console.log('Handle rejected promise (' + reason + ') here.');
              });

              if (this.first_flag == false) {
                  this.first_flag = true;
               }
      },
      loadMore:function(){
        this.loading = true;
        //Indicator.open();
        setTimeout(() => {
          let last = this.list[this.list.length - 1];
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i);
          }
          this.loading = false;
          //Indicator.clase();
        }, 2500);
      },
      show_click: function (x) {
        for (let y = 0; y < this.header_list.length; y++){
          this.header_list[y].c = false;
        }
        this.header_list[x].c = true;
        this.sel_id = x+1;
        this.get_data();
      },
      loadTop() {
        this.$refs.loadmore.onTopLoaded();
      },
      loadBottom() {
        this.allLoaded = true;// 若数据已全部获取完毕
        this.$refs.loadmore.onBottomLoaded();
     },
      clear_data_list:function () {
        this.data_mx= '';
        this.data_wish = "";
        this.data_letter = "";
        this.data_voice="";
      },
      get_data:function (resolve,reject) {
        Indicator.open();
        let id = location.search.split("user_id=")[1];
        let base_url = common.get_base_url();
        this.$http.post('/yizhiweimen/api/user/collect/findCollectById',
          qs.stringify(
            {
              'sortId': this.sel_id,//类型id
              "userId": id,
              "currentPage":1,
              "pageSize":10
            })
        )
          .catch((thrown) => {
            Indicator.close();
            console.log(thrown);
            try {
              reject(e.data);
            } catch (e) {

            }
          }).then((e) => {
          Indicator.close();
          try {
            if(this.sel_id ==1){
              this.clear_data_list();
              this.data_mx = e.data;
            }else if(this.sel_id == 2){//wish
              this.clear_data_list();
              this.data_wish = e.data;
            }else if(this.sel_id ==3){
                this.clear_data_list();
              this.data_letter = e.data;
            }else if(this.sel_id ==4){
                this.clear_data_list();
              this.data_voice  = e.data;
            }
            resolve(e.data)
          } catch (e) {

          }
        })
      },
    },
    components: {

    },

    mounted: function () {
      let col_header = window.getComputedStyle(this.$refs.col_header,"height").height.replace("px","");
      let header_h = window.getComputedStyle(this.$refs.sec_nav, "height").height.replace("px","");
      let main_h = document.body.clientHeight;

      this.$refs.main.style.height = main_h - parseInt(col_header) - parseInt(header_h) + "px";
      console.log(this.$refs.main)
      ///api/user / collect / findCollectById
      let id = location.search.split("user_id=")[1];
      let sel_id = 1;

      Indicator.open();
      let base_url = common.get_base_url();
      this.$http.post('/yizhiweimen/api/user/collect/findCollectById',
        qs.stringify(
          {
            'sortId': sel_id,//类型id
            "userId": id,
          })
      )
        .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
          try {
            reject(e.data);
          } catch (e) {

          }
        }).then((e) => {
          Indicator.close();
          this.menu_list = e.data;
          try {
           this.data_mx = e.data;
           console.log(e.data)
           if(e.data.length <10){
               //不够数据了
             console.log("不够数据了——————");
             console.log(this.$refs.scroller_main.finishPullToRefresh())

           }
          } catch (e) {

          }
        })
    },

  }
</script>

<style scoped>
  /*loading_show*/
  .wrapper_voice_mb_box{
    width:21.3vw;
    height:21.3vw;
    background-color:#fff;
  }
  .mb_box {
    width: 65.5vw;
    display: flex;
    justify-content: space-between;
  }
  .bg_all {
    vertical-align:top;
    display: inline-block;
    border-radius: 2vw;
  }
  .wrapper_voice {
    display: inline-block;
  }
  .play_voice {
    width: 55.7vw;
    padding-left:3vw;
  }
  .bg_all {
    width: 9.8vw;
    height: 9.8vw;
  }
  .img_wrapper {
    margin-top:2.6vw;
    background-color: #9f5c2f;
    width: 89%;
    margin: 2vw auto;
    box-shadow: 2px 2px 4px 2px #80808082;
    padding-top: 1.6vw;
    padding-bottom: 1.6vw;
    border-radius: 2vw;
  }
  .user_name {
    color: #a8704f;
    font-size: 4.5vw;
    font-weight: bold;
    vertical-align: middle;
  }
  .token_bottom_user_img {
    width: 6.4vw;
    height: 6.4vw;
    border-radius: 1vw;
    border: 1px solid #9f5c2f;
    vertical-align: middle;
  }
  .token_title {
    letter-spacing:1px;
    font-size: 4vw;
    color: #000;
    text-align: left;
    padding-left: 8vw;
    margin-bottom: 2vw;
    text-overflow: ellipsis;
    font-weight: bold;
    padding-left: 4.2vw;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
  .token_introduce {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #646464;
    font-size: 3.5vw;
    padding-left:4vw;
  }
  .token_wrapper_img {
    width: 41.8vw;
    height: 27vw;
  }
  .token_slider li {
    float:left;
    margin-left: 6vw;
  }
  .token_wrapper {
    height: 53.8vw;
    width: 41.8vw;
    background-color: #fff;
    border-radius: 2vw;
    box-shadow: 1px 1px 4px 2px #6460605c;
    margin-top: 4.8vw;
  }
  .main_wish_bottom {
    display: flex;
    justify-content: space-between;
    font-size: 3vw;
    color: #9c5c30;
    height: 8.3vw;
    line-height: 8.3vw;
    background-color: #fff;
    border-radius: 0 0 4vw 4vw;
  }
  .main_wisht_pnbg {
    height: 39vw;
    border-radius: 2vw;
    box-shadow: 1px 1px 4px 2px #808080;
    width: 85vw;
    margin-top: 2vw;
  }
  .mian_wish_w {
    font-size: 3.5vw;
    color: #fff;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-left: 4.2vw;
    padding-right: 4.2vw;
    line-height:5vw;
  }
  .load_more_wish {
    margin: 2.4vw auto 0;
  }
  .main_wish {
    height: 54.4vw;
    background-color: #dea675;

  }
  .wish_header {
    height: 8vw;
    line-height: 8vw;
    font-size: 4vw;
    text-align: center;
    color: #fff;
    width: 100%;
    border-radius: 2vw 2vw 0 0;
    background-color: #9f5c2f;
  }
  .wish_wrapper {
    height: 71vw;
    width: 89vw;
    border-radius: 4vw;
    margin:0 auto;
    box-shadow:1px 1px 4px 2px #808080 ;
  }
  .wt_s {
    height: 8vw;
    padding-bottom: 2vw;
    padding-top: 2vw;
    color: #853100;
    font-size: 2vw;
  }
  .play_m {
    height: 4.8vw;
    line-height: 4.8vw;
    border: 1px solid #853100;
    border-radius: 2vw;
    font-size: 3.5vw;
    margin-top: 5vw;
  }
  .load_m_box_header {
    color: #853100;
    font-size: 3vw;
    margin-bottom: 1vw;
    margin-top: 1vw;
  }
  .img_limit {
    border: 1px solid #a8581e;
    height: 38.5vw;
    width: 37.3vw;
    display: block;
    margin: 0 auto;
  }
  .load_m_box {
    width: 44.8vw;
    height: 62.5vw;
    border-radius: 2vw;
    border: 1px solid #a44418;
    margin-top: 2.6vw;
    background-color:#fff;
  }
  .load_more {

  }
  .load_more li{
    float:left;
    margin-left: 4vw;
  }
  .loading_show {
    height: 10vw;
    line-height: 10vw;
    margin-bottom: 5vw;
    margin-top: 5vw;
  }
  /*loading_show*/
  /*main s*/
  ._v-container{
    padding-top:22vw;
  }
  .main {
    background-color: #eeeeee;
    overflow: scroll;
    padding-top: 20vw;
  }


  /*main e*/
  .sec_nav .act {
    color: #a05c2e;
  }
  .sec_nav{
    position:fixed;
    display:flex;
    width:100%;
    height:9.3vw;
    line-height:9.3vw;
    font-size:3.7vw;
    justify-content:space-around;
    top:11.7vw;
    z-index:100;
    background-color:#fff;
  }
  .goback_col_header {
    width: 6.2vw;
    height: 6.8vw;
    vertical-align: middle;
    padding-left: 2.6vw;
  }
  .collect_header_w {
    padding-left: 8vw;
  }
  .collect_header {
    height: 11.7vw;
    line-height: 11.7vw;
    font-size: 4.2vw;
    color: #ffffff;
    background-color: #9f5c2f;
    text-align:left;
    width:100%;
    position:fixed;
    z-index:100;
  }
</style>
